<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>frontend-monitor</title>
</head>
<body>
    <div id="container">
        <button id="jsErrorbtn" onclick="triggerJsError()">点我 jsError</button>
        <br>
        <br>
        <button id="jsErrorbtn" onclick="triggerPromiseError()">点我 promiseError</button>
        <br>
        <br>
        <button id="jsErrorbtn" onclick="triggerXhrSuccess()">点我 xhrSuccess</button>
        <br>
        <br>
        <button id="jsErrorbtn" onclick="triggerXhrError()">点我 xhrError</button>
    </div>

    <script>
        function triggerJsError() {
            console.log(window._errorObj.key)
        }

        function triggerPromiseError() {
            new Promise((resolve, reject) => {
                // reject('promise error') // string
                window._errorObj.key  // reason 是一个对象
            }).then(res => {
                console.log('res', res)
            })
            // .catch(err => {
            //     console.log('err', err)
            // })
        }
        
        function triggerXhrSuccess() {
            let xhr = new XMLHttpRequest
            xhr.open('GET', '/success', true)
            xhr.responseType = 'json'
            xhr.onload = function() {
                console.log('triggerXhrSuccess', xhr.response)
            }

            xhr.send()
        }

        function triggerXhrError() {
            let xhr = new XMLHttpRequest
            xhr.open('POST', '/error', true)
            xhr.responseType = 'json'
            xhr.onload = function() {
                console.log('triggerXhrError', this.response)
            }
            xhr.onerror = function(error) {
                console.log('triggerXhrError', error)
            }
            xhr.send({ name: 'picasso', age: 18 })
        }
    </script>
    <script src="someError.js"></script>
</body>
</html>